<template>
  <div>
    <Header/>
    <router-view></router-view>

      <!-- 
      Footer组件可能在某些路由下不展示,所以需要进行条件渲染:
        解决方式1:直接书写v-if条件渲染,接受当前路由的命名不等于XXX和XXX和XXX.....
        解决方式2:把插值语法的复杂逻辑直接书写成计算属性
        解决方式3:因为Footer是否展示和路由相关,所以我们可以让路由携带元信息代表当前是否展示
      -->

    <!--第一种方式  -->
    <!-- <Footer v-if = "$route.name !== 'Login' && $route.name !== 'Register' "/> -->

    <!--第二种方式 -->
    <!-- <Footer v-if ="isShow" /> -->

    <!-- 第三种方式  -->
    <Footer v-if ="FooterIsShow" />


  </div>
</template>

<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"

export default {
  name: 'App',
  components: {
    Header,
    Footer,
  },
  mounted() {
    console.log(this)
  },
  computed:{

    // 第二种方式
    // isShow(){
    //   return this.$route.name !== 'Login' && this.$route.name !== 'Register' 
    // }
    
    // 第三种方式
    FooterIsShow(){
      return !this.$route.meta.FooterIsHidden
    }


  }
}
</script>

<style scoped lang = "less">
</style>
